<template>
    <div style="min-height: 500px">
        <div style="border: 1px solid #e4e7ed; padding:10px">
            <div style="color: black">条款变更记录, 条款序号: {{data.clauseCode}}</div>
            <div v-if="data.content['条款基本信息']">
                <p class="edit-title">【条款基本信息】</p>
                <div v-for="(itme, index) in data.content['条款基本信息']" :key="index">
                    <div v-show="itme.riskModifyTypeEnum == '1'">
                        <span class="edit-type">{{ itme.moduleDetail }} 新增：</span>
                        <span class="edit-color"> {{ isNaN(itme.afterChange)? itme.afterChange : numberFormat(itme.afterChange) }} </span>
                    </div>
                    <div v-show="itme.riskModifyTypeEnum == '2'">
                        <span class="edit-type">{{ itme.moduleDetail }} 变更 :</span> <span class="edit-color">{{ isNaN(itme.beforeChange)? itme.beforeChange : numberFormat(itme.beforeChange) }}</span> ->
                        <span class="edit-color"> {{ isNaN(itme.afterChange)? itme.afterChange : numberFormat(itme.afterChange) }} </span>
                    </div>
                    <div v-show="itme.riskModifyTypeEnum == '3'">
                        <span class="edit-type">{{ itme.moduleDetail }} 删除：</span>
                        <span class="edit-color"> {{ isNaN(itme.beforeChange)? itme.beforeChange : numberFormat(itme.beforeChange) }} </span>
                    </div>
                </div>     
            </div>
            <div v-if="data.content['条款适用产品范围']">
                <p class="edit-title">【条款适用产品范围】</p>
                <div v-for="(itme, index) in data.content['条款适用产品范围']" :key="index">
                    <div v-show="itme.riskModifyTypeEnum == '1'">
                        <span class="edit-type">{{ itme.moduleDetail }} 新增：</span>
                        <span class="edit-color"> {{ isNaN(itme.afterChange)? itme.afterChange : numberFormat(itme.afterChange) }} </span>
                    </div>
                    <div v-show="itme.riskModifyTypeEnum == '2'">
                        <span class="edit-type">{{ itme.moduleDetail }} 变更 :</span> <span class="edit-color">{{ isNaN(itme.beforeChange)? itme.beforeChange : numberFormat(itme.beforeChange) }}</span> ->
                        <span class="edit-color"> {{ isNaN(itme.afterChange)? itme.afterChange : numberFormat(itme.afterChange) }} </span>
                    </div>
                    <div v-show="itme.riskModifyTypeEnum == '3'">
                        <span class="edit-type">{{ itme.moduleDetail }} 删除：</span>
                        <span class="edit-color"> {{ isNaN(itme.beforeChange)? itme.beforeChange : numberFormat(itme.beforeChange) }} </span>
                    </div>
                </div>     
            </div>
            <div v-if="data.content['事后系统配置说明']">
                <p class="edit-title">【事后系统配置说明】</p>
                <div v-for="(itme, index) in data.content['事后系统配置说明']" :key="index">
                    <div v-show="itme.riskModifyTypeEnum == '1'">
                        <span class="edit-type">{{ itme.moduleDetail }} 新增：</span>
                        <span class="edit-color"> {{ isNaN(itme.afterChange)? itme.afterChange : numberFormat(itme.afterChange) }} </span>
                    </div>
                    <div v-show="itme.riskModifyTypeEnum == '2'">
                        <span class="edit-type">{{ itme.moduleDetail }} 变更 :</span> <span class="edit-color">{{ isNaN(itme.beforeChange)? itme.beforeChange : numberFormat(itme.beforeChange) }}</span> ->
                        <span class="edit-color"> {{ isNaN(itme.afterChange)? itme.afterChange : numberFormat(itme.afterChange) }} </span>
                    </div>
                    <div v-show="itme.riskModifyTypeEnum == '3'">
                        <span class="edit-type">{{ itme.moduleDetail }} 删除：</span>
                        <span class="edit-color"> {{ isNaN(itme.beforeChange)? itme.beforeChange : numberFormat(itme.beforeChange) }} </span>
                    </div>
                </div>     
            </div>
            <div v-if="data.content['风控系统配置说明']">
                <p class="edit-title">【风控系统配置说明】</p>
                <div v-for="(itme, index) in data.content['风控系统配置说明']" :key="index">
                    <div v-show="itme.riskModifyTypeEnum == '1'">
                        <span class="edit-type">{{ itme.moduleDetail }} 新增：</span>
                        <span class="edit-color"> {{ isNaN(itme.afterChange)? itme.afterChange : numberFormat(itme.afterChange) }} </span>
                    </div>
                    <div v-show="itme.riskModifyTypeEnum == '2'">
                        <span class="edit-type">{{ itme.moduleDetail }} 变更 :</span> <span class="edit-color">{{ isNaN(itme.beforeChange)? itme.beforeChange : numberFormat(itme.beforeChange) }}</span> ->
                        <span class="edit-color"> {{ isNaN(itme.afterChange)? itme.afterChange : numberFormat(itme.afterChange) }} </span>
                    </div>
                    <div v-show="itme.riskModifyTypeEnum == '3'">
                        <span class="edit-type">{{ itme.moduleDetail }} 删除：</span>
                        <span class="edit-color"> {{ isNaN(itme.beforeChange)? itme.beforeChange : numberFormat(itme.beforeChange) }} </span>
                    </div>
                </div>     
            </div>   
        </div>
        <div style="border: 1px solid #e4e7ed; padding:10px">
            <div style="color:black">条目变更记录</div>
            <p class="edit-title" v-if="this.relationLogCode">【条目关联】</p>
            <div v-if="addEntryCodes.length != 0">
                <span class="edit-type">新增关联：</span> 
                <span class="edit-color" v-for="(item, index) in addEntryCodes" :key="index"><span>{{item}} </span></span>
            </div>
            <div v-if="removeEntryCodes.length != 0">
                <span class="edit-type">删除关联：</span> 
                <span class="edit-color" v-for="(item, index) in removeEntryCodes" :key="index"><span>{{item}} </span></span>
            </div>
        </div>
    </div>
</template>
<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator';
import { numberFormat } from '@/utils/tools';

@Component({ name: 'ClauseCompare' })
export default class ClauseCompare extends Vue {
    @Prop() title: any[];
    @Prop() data: any [];
    @Prop() relationLogCode;
    numberFormat = numberFormat;
    relationList = [];
    addEntryCodes = [];
    removeEntryCodes = [];
    mounted() {
        if (this.relationLogCode) {
            this.getRelation();
        }
    }
    // 条款条目关联记录详情
    getRelation() {
       this.$axios.post('/indexClause/changeRecord/relation/' + this.relationLogCode).then((res: any) => {
            this.addEntryCodes = res.addEntryCodes;
            this.removeEntryCodes = res.removeEntryCodes;
        }); 
    }
} 
</script>
<style lang="scss" scoped>
.edit-title {
    font-size: 15px;
}

.edit-type {
    margin-left: 20px;
    color: green;
}

.edit-color {
    color: red;
}
</style>
